<template>
  <div class="form_init">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabTable">
        <el-tab-pane label="盈亏报表" name="loss">
            <div class="form_select">
              <div>
                <el-date-picker
                  v-model="lossForm.sdate"
                  type="date"
                  placeholder="选择开始日期" 
                  size="small" 
                  class="select_option1"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  >
                </el-date-picker>
                <el-date-picker
                  v-model="lossForm.edate"
                  type="date"
                  placeholder="选择结束日期" 
                  size="small" 
                  class="select_option1"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  >
                </el-date-picker>
                <el-button type="primary"  size="small" @click="search('getLoss','lossForm')">搜索</el-button>
              </div>
            </div>
          <lossTable :lossList="lossList" :goods="goods" :enter="enter" :loss="loss"></lossTable>
        </el-tab-pane>
        <el-tab-pane label="营业额" name="money">
          <div class="form_select">
            <div>
              <el-date-picker
                v-model="moneyForm.sdate"
                type="date"
                placeholder="选择开始日期" 
                size="small" 
                class="select_option1"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                >
              </el-date-picker>
              <el-date-picker
                v-model="moneyForm.edate"
                type="date"
                placeholder="选择结束日期" 
                size="small" 
                class="select_option1"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                >
              </el-date-picker>
              <el-select class="select_option1" size="small" v-model="moneyForm.type" 
              placeholder="消费类型">
                <el-option
                  v-for="item in typeArr"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-button type="primary"  size="small" @click="moneySearch">搜索</el-button>
            </div>
          </div>
          <moneyTable :list="moneyList"></moneyTable>
        </el-tab-pane>
        <el-tab-pane label="仓库盘点表" name="sheet">
          <div class="form_select">
            <div>
              <el-date-picker
                v-model="sheetForm.sdate"
                type="date"
                placeholder="选择开始日期" 
                size="small" 
                class="select_option1"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                >
              </el-date-picker>
              <el-date-picker
                v-model="sheetForm.edate"
                type="date"
                placeholder="选择结束日期" 
                size="small" 
                class="select_option1"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                >
              </el-date-picker>
              <el-button type="primary" size="small" @click="search('getSheet','sheetForm')">搜索</el-button>
            </div>
          </div>
          <sheetTable :list="sheetList"></sheetTable>
        </el-tab-pane>
        <el-tab-pane label="增长率统计" name="inc">
          <div class="form_select">
            <div>
              <el-select class="select_option1" size="small" v-model="incForm.type" 
                  placeholder="时间类型">
                  <el-option
                    v-for="item in timeArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
                <el-select class="select_option1" size="small" v-model="incForm.cardIndex" 
                  placeholder="统计项目">
                  <el-option
                    v-for="(item,index) in cardArr"
                    :key="index"
                    :label="item"
                    :value="index">
                  </el-option>
                </el-select>
                <el-button type="primary" size="small" @click="getInc">搜索</el-button>
            </div>
          </div>
          <incTable :list="incList"></incTable>
        </el-tab-pane>
        <el-tab-pane label="客户分析" name="user">
            <userTable :info="userList"></userTable>
        </el-tab-pane>
        <el-tab-pane label="个人业绩统计" name="my">
          <div class="form_select">
            <div>
                <el-select class="select_option1" size="small" v-model="myForm.uid" 
                  placeholder="员工姓名">
                  <el-option
                    v-for="(item,index) in userArr"
                    :key="index"
                    :label="item.realname"
                    :value="item.uid">
                  </el-option>
                </el-select>
                <el-date-picker
                  v-model="myForm.date"
                  type="month"
                  placeholder="选择月份" 
                  size="small" 
                  class="select_option1"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  >
                </el-date-picker>
                <el-button type="primary" size="small" @click="getMyList">搜索</el-button>
              </div>
              <div class="select_right">
                <el-button type="primary" size="small" @click="exportExcel">导出excel</el-button>
            </div>
            </div>
          <myTable :list="myList"></myTable>
        </el-tab-pane>
        <el-tab-pane label="手工报表" name="manual">
          <div class="form_select">
            <div>
              <el-select class="select_option1" size="small" v-model="manuaForm.type" 
                  placeholder="完成状态">
                  <el-option
                    v-for="item in manuaArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
                <el-select class="select_option1" size="small" v-model="manuaForm.uid" 
                  placeholder="员工姓名">
                  <el-option
                    v-for="(item,index) in userArr"
                    :key="index"
                    :label="item.realname"
                    :value="item.uid">
                  </el-option>
                </el-select>
                <el-button type="primary" size="small" @click="getManualList">搜索</el-button>
              </div>
            </div>
            <manualTable :list="manualList"></manualTable>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
import lossTable from "./lossTable"
import moneyTable from "./moneyTable"
import sheetTable from "./sheetTable"
import incTable from "./incTable"
import userTable from "./userTable"
import myTable from "./myTable"
import manualTable from "./manualTable"
import {excelExport} from "../../public/excelExport"
export default {
  data() {
    return {
      activeName: 'loss',
      goods:{},
      enter:{},
      loss:{},
      lossList:[],
      lossForm:{},
      moneyList:[],
      moneyForm:{},
      sheetList:[],
      sheetForm:{},
      incList:[],
      incForm:{
        type:1,
        cardIndex:0
      },
      typeArr:[
        {id:0,name:'全部'},
        {id:1,name:'充值'},
        {id:2,name:'购卡'},
        {id:3,name:'消费'}
      ],
      timeArr:[
        {id:1,name:'按年'},
        {id:2,name:'按月'}
      ],
      cardArr:['营业额','总成本','顾客数量','顾客耗卡','顾客充值','顾客开卡','商品销售'],
      userList:[],
      myList:[],
      myForm:{
        type:0,
        uid:0
      },
      myTypeArr:[
        {id:0,name:'全部'},
        {id:1,name:'充值业绩'},
        {id:2,name:'开卡业绩'},
        {id:3,name:'购买业绩'},
        {id:4,name:'手工业绩'},
      ],
      userArr:[
        {id:0,'realname':'全部',uid:0}
      ],
      manualList:[],
      manuaArr:[
        {id:0,name:'全部'},
        {id:1,name:'未完成'},
        {id:2,name:'已完成'},
        {id:3,name:'已取消'}
      ],
      manuaForm:{
        type:0,
        uid:0
      },
    };
  },
  components: {
    "lossTable": lossTable,
    "moneyTable":moneyTable,
    "sheetTable":sheetTable,
    "incTable":incTable,
    "userTable":userTable,
    "myTable":myTable,
    "manualTable":manualTable
  },
  created: function() {
    this.getLoss()
  },
  methods: {
    handleClick(tab, event) {
      if(tab.name == 'money' && this.moneyList.length == 0){
        this.getMoneyList()
      }
      if(tab.name == 'sheet' && this.sheetList.length == 0){
        this.getSheet()
      }
      if(tab.name == 'inc' && this.incList.length == 0){
        this.getInc()
      }
      if(tab.name == 'user' && this.userList.length == 0){
        this.getUserList()
      }
      if(tab.name == 'my'){
        if(this.myList.length == 0){
          this.getMyList()
        }
        if(this.userArr.length == 1){
          this.getUser()
        }
      }
      if(tab.name == 'manual'){
        if(this.manualList.length == 0){
          this.getManualList()
        }
        if(this.userArr.length == 1){
          this.getUser()
        }
      } 
    },
    getLoss:function(){
      this.lossForm.oa_id = localStorage.getItem('oa_id')
      var that = this
      this.$get('manage/center/count',this.lossForm).then((res) => {
          that.enter = res.data.enter
					that.loss = res.data.loss.count
					that.lossList = res.data.loss.list
					that.goods = res.data.goods
      })
    },
    search:function(key,form){
      if(!this[form].sdate || !this[form].edate){
        this.$message.error('请选择开始日期和结束日期!');
        return;
			}
      this[key]()
    },
    getSheet:function(){
      this.sheetForm.oa_id = localStorage.getItem('oa_id')
      var that = this
      this.$get('pc/goods/sheet',this.sheetForm).then((res) => {
        that.sheetList = res.data
      })
    },
    getMoneyList:function(){
      this.moneyForm.oa_id = localStorage.getItem('oa_id')
      var that = this
      this.$get('pc/money/all',this.moneyForm).then((res) => {
        that.moneyList = res.data
      })
    },
    getInc:function(){
      this.incForm.oa_id = localStorage.getItem('oa_id')
      var that = this
      this.$get('manage/inc/res',this.incForm).then((res) => {
        that.incList = res.data
      })
    },
    moneySearch:function(){
      if(this.moneyForm.sdate && !this.moneyForm.edate){
        this.$message.error('请选择开始日期和结束日期!');
        return;
			}
      if(!this.moneyForm.sdate && this.moneyForm.edate){
        this.$message.error('请选择开始日期和结束日期!');
        return;
			}
      this.getMoneyList()
    },
    getUserList:function(){
      var data = {
        oa_id:localStorage.getItem('oa_id')
      }
      var that = this
      this.$get('pc/center/user',data).then((res) => {
        that.userList = res.data
      })
    },
    getMyList:function(){
      this.myForm.oa_id = localStorage.getItem('oa_id')
      var that = this
      this.$get('pc/my/info',this.myForm).then((res) => {
        console.log(res)
        that.myList = res.data
      })
    },
    getUser:function(){
      var data = {oa_id:localStorage.getItem('oa_id')}
      var that = this
      this.$get('pc/staff/all',data).then((res) => {
        that.userArr = that.userArr.concat(res.data)
      })
    },
    getManualList:function(){
      this.manuaForm.oa_id = localStorage.getItem('oa_id')
      var that = this
      this.$get('pc/my/manual',this.manuaForm).then((res) => {
        that.manualList = res.data
      })
    },
    exportExcel:function() {
      let title = '员工业绩表'
      excelExport(title)
      return false;
    }
  }
};
</script>
<style>
.form_init{
  padding:20px 20px 20px 20px;
}
.table tr td{
	border:1px solid #C8C7CC;
	text-align: center;
	height:35px;
	line-height:35px;
}
.table tr th{
	border:1px solid #C8C7CC;
	text-align: center;
	height:35px;
	line-height:35px;
}
</style>